<template>
	<view class="home">
		<view class="header">
			<view class="logobox">
				<image class="logo" src="../../static/images/logo.png" mode="heightFix">
				</image>
			</view>
			<view class="search">
				<navigator url="/pages/search/search">
					<uni-icons class="searchicon" type="search" size="20"></uni-icons>

					<input type="text" placeholder="输入要搜索的商品">
					</input>
				</navigator>
			</view>
		</view>
		<view class="notice">
			<uni-notice-bar showIcon scrollable single
				text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
		</view>
		
		<!-- 商品列表 -->
		<view class="content">
			<item-info></item-info>
			<item-info></item-info>
		</view>
	</view>
</template>

<script setup>

</script>

<style scoped lang="scss">
	.home {
		margin:0 20rpx;
		display: flex;
		flex-direction: column;
		.header {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;

			.logobox {
				width: 20vw;
				height: 100%;
				padding: 0 20rpx;

				.logo {
					width: 100% !important;
					height: 100%;
				}
			}

			.search {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				navigator {
					position: relative;
					width: 100%;
					height: 100%;

					.searchicon {
						top: 25rpx;
						left: 0;
						position: absolute;
					}

					input {
						position: absolute;
						left: 40rpx;
						top: 25rpx;
						padding: 0 5rpx;
					}
				}
			}
		}
		.notice{
			margin: 10rpx 0 0;
			width: 100%;
			.uni-noticebar{
				padding: 1rpx 1rpx !important;
			}
		}
		.content{
			margin-bottom: 10rpx;
		}
	}
</style>